<!--
 * @Author: your name
 * @Date: 2021-05-10 14:13:01
 * @LastEditTime: 2021-05-26 14:30:23
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /vite-project/src/views/shared/login/index.vue
-->
<template>
    <div class="login-box">
        <div class="login-logo">
            <img src="@/assets/logo.png" alt />
            <h1>Antd Vite TypeScript Vue3.0</h1>
        </div>
        <a-form
            :model="formState"
            :rules="rules"
            ref="formRef"
            :label-col="{ span: 6 }"
        >
            <a-form-item label="用户名" name="login_name" has-feedback>
                <a-input
                    v-model:value="formState.login_name"
                    autocomplete="off"
                    placeholder="admin"
                    size="large"
                />
            </a-form-item>
            <a-form-item label="密  码" name="login_password" has-feedback>
                <a-input
                    type="password"
                    size="large"
                    v-model:value="formState.login_password"
                    autocomplete="off"
                    placeholder="1"
                />
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 8, offset: 10 }">
                <a-button type="primary" @click="handleSubmit" size="large"
                    >登录</a-button
                >
            </a-form-item>
        </a-form>
    </div>
</template>
<script lang="ts">
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
import { defineComponent, reactive, UnwrapRef, ref, toRaw } from 'vue';
import { useUserStore } from '@/store/modules/user';
interface FormState {
    login_name: string;
    login_password: string;
}
export default defineComponent({
    name: 'App',
    setup() {
        const formRef = ref();
        const formState: UnwrapRef<FormState> = reactive({
            login_name: '',
            login_password: '',
        });
        const rules = {
            login_name: [
                {
                    required: true,
                    message: '请输入用户名',
                    trigger: 'blur',
                },
            ],
            login_password: [
                {
                    required: true,
                    message: '请输入密码',
                    trigger: 'blur',
                },
            ],
        };
        const userStore = useUserStore();
        const handleSubmit = () => {
            formRef.value
                .validate()
                .then(async () => {
                    await userStore.login(toRaw(formState));
                })
                .catch((error: ValidateErrorEntity<FormState>) => {
                    console.log('error', error);
                });
        };

        return {
            formRef,
            rules,
            formState,
            handleSubmit,
        };
    },
});
</script>
<style lang="less" scoped>
.login-box {
    width: 100vw;
    height: 100vh;
    background: url('@/assets/login.svg');
    background-size: 100% 100%;
    display: flex;
    padding-top: 240px;
    flex-direction: column;
    align-items: center;

    .login-logo {
        display: flex;
        align-items: center;
        margin-bottom: 30px;
        h1 {
            line-height: 48px;
            height: 48px;
            margin-bottom: 0px !important;
        }
        img {
            width: 48px;
            height: 48px;
        }
    }
}
</style>
